<template>
<div id="QD_Shops">
  <van-tabs style="flex-shrink: 0;" @change="changeType" inverse indicator-color="#2196F3" color="#2196F3" 
    text-color="rgba(0, 0, 0, 0.54)" center :swipe-threshold="5">
    <van-tab title="有设备"></van-tab>
    <van-tab title="无设备"></van-tab>
  </van-tabs>
  <van-search v-model="searchValue" placeholder="请输入门店名称" show-action shape="round">        
    <div slot="action" @click="onSearch" class="ft-blue">搜索</div>
  </van-search>
  <div class="flex-body">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
      <div class="shop-box" v-for="(item, index) in list" :key="index" @click="showBlank( item )">        
        <div class="shop-img" style="position: relative;">
          <img :src="item.shopPhotUrl" style="width: 100%; height: 100%;"/>
        </div>
        <div class="shop-right">
          <div class="shop-row">
            <span>门店编号:{{ item.shopId }}</span>
            <span class="ft-blue" style="display: inline;" @click.stop="detail.showBlank( item )">查看详情</span>
          </div>
          <div class="shop-row">
            <span @click.stop="$store.commit('copy', item.shopName)">{{ item.shopName }}
              <img v-if="$store.state.userInfo.roleType == 0 || $store.state.userInfo.roleType == 1" :src="`./static/img/${ item.level }.png`" style="width: 0.5rem; display: inline-block; vertical-align: middle;"/> 
            </span>          
            <div v-if="$store.state.userInfo.roleType !== 3" style="width">
              <span class="ft-blue" style="display: inline-block;" @click.stop="goto( item )">前往</span>
              <!-- <span class="ft-blue" style="display: inline-block;" @click.stop="modify( item )" v-if="$store.state.userInfo.roleType !== 3">修改</span> -->
            </div>
          </div>
          <div class="shop-row">
            <!-- <span>流水</span> -->
            <div style="font-size: 0.28rem;">
              <span class="ft-org" style="display: inline-block;">前月：{{ item.liushui[0] }}</span>
              <span class="ft-org" style="display: inline-block;">上月：{{ item.liushui[1] }}</span>
              <span class="ft-org" style="display: inline-block;">本月：{{ item.liushui[2] }}</span>
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
  
  <van-popup v-model="blank.show" position="bottom" :style="{ height: '100%' }">
    <div class="page-blank">
      <van-nav-bar title="订单详情" left-arrow @click-left="blank.show = false"/>
      <van-cell-group>
        <van-field readonly label="门店名称"     :value="info.shopName"/>
        <van-field readonly label="门店联系电话" :value="info.shopTele"/>
        <van-field readonly label="门店地址"     :value="info.shopSite"/>
        <van-field readonly label="所在区域"     :value="info.region"/>
        <van-field readonly label="计费时间"     :value="info.chargeTime"/>
        <van-field readonly label="计费单位"     :value="info.chargeUnit ? '分钟' : '小时'"/>
        <van-field readonly label="计费金额"     :value="info.chargeMoney + '元'"/>
        <van-field readonly label="免费时长"     :value="info.freeTime + '分钟'"/>
        <van-field readonly label="最高消费"     :value="info.highest + '元'"/>
        <van-field readonly label="经度"         :value="info.longitude"/>
        <van-field readonly label="纬度"         :value="info.latitude"/>
        <van-field readonly label="营业时间"     :value="info.shopHours"/>
      </van-cell-group>
    </div>
  </van-popup>
  
  <van-popup v-model="detail.show" position="bottom" :style="{ height: '100%' }">
    <div class="page-blank">
      <van-nav-bar title="门店详情" left-arrow @click-left="detail.show = false"/>
      <van-tabs style="flex-shrink: 0;" @change="detail.change()" v-model="detail.active" inverse indicator-color="#2196F3" color="#2196F3" 
        text-color="rgba(0, 0, 0, 0.54)" center :swipe-threshold="5">
        <van-tab v-if="$store.state.userInfo.userName != '13239294898'" title="门店设备"></van-tab>
        <van-tab title="门店订单"></van-tab>
      </van-tabs>
      <div class="flex-body" v-if="detail.active == 1">
        <van-list v-model="detail.loading" :finished="detail.finished" finished-text="没有更多了" @load="detail.getList">
          <div class="tongji-box" v-for="(item, index) in detail.list" :key="index">
            <div class="tongji-item">
              <div class="tongji-row" style="height: 1.2rem;">
                <img :src="item.icon" style="width: 1rem; height: 1rem;"/>
                <div>{{ item.nick }}</div>
              </div>
              <div class="tongji-row">
                <div>订单编号：</div>
                <div>{{ item.orderId }}{{item.shopDisplay == 1 ? '*' : ''}}</div>
              </div>
              <div class="tongji-row">
                <div>充电宝：</div>
                <div>{{ item.chargerSn }}</div>
              </div>
              <div class="tongji-row">
                <div>费用：</div>
                <div>{{ item.realExpense || item.realExpense == 0 ? item.realExpense+'元' : order[ item.orderStatus ] }}</div>
              </div>
              <div class="tongji-row">
                <div>租借地点：</div>
                <div class="ft-blue">{{ item.shopName }}</div>
              </div>
              <div class="tongji-row">
                <div>租借时间：</div>
                <div>{{ item.rentTime }}</div>
              </div>
              <div class="tongji-row">
                <div>归还时间：</div>
                <div>{{ item.returnTime }}</div>
              </div>
            </div>
          </div>
        </van-list>
      </div>
      <div class="flex-body" v-else>
        <div class="tongji-box" v-for="(item, index) in detail.equipList" :key="index">
          <div class="tongji-item">
            <div class="tongji-row">
              <div>设备编号：</div>
              <div @click.stop="$store.commit('copy', item.equipmentNum)">{{ item.equipmentNum }}</div>
            </div>
            <div class="tongji-row">
              <div>上线天数：</div>
              <div>{{ item.onlineDays }}</div>
            </div>
            <!-- <div class="tongji-row">
              <div>总订单数：</div>
              <div>{{ item.orderTotal }}</div>
            </div>
            <div class="tongji-row">
              <div>总流水：</div>
              <div>{{ item.returnSun }}</div>
            </div> -->
            <!-- <div class="tongji-row">
              <div>退回流水：</div>
              <div>{{ item.orderMoneyTotal }}</div>
            </div> -->
          </div>
        </div>
      </div>
    </div>
  </van-popup>
  
  <van-popup v-model="tanchu.show" position="bottom" :style="{ height: '100%' }">
    <div class="page-blank" id="ShebeiList">
      <van-nav-bar title="设备详情" left-arrow @click-left="tanchu.show = false"/>
      <div style="height: 1rem; display: flex; flex-direction: row; justify-content: space-around; align-items: center; border-bottom: 1px solid #F1F1F1;">
        <div style="height: 1rem; width: 3.6rem; font-size: 0.25rem; line-height: 1rem;">
          <div class="ft-org">{{ tanchu.info.equipmentNum }}</div>
        </div>
        <div></div>
        <!-- <div style="width: 1.3rem; height: 0.5rem; line-height: 0.5rem; text-align: center; color: #FFFFFF; border-radius: 0.1rem; font-size: 0.2rem;
          background: #16B8BE;" @click="tanchu.allForce">全部弹出</div> -->
      </div>
      <div class="flex-body" style="background: #FFF;">
        <div class="bao-box" v-for="item in tanchu.list" :key="item.sn">
          <div class="bao-icon">宝</div>
          <div class="bao-content">
            <div class="bao-title">
              <span style="font-size: 0.3rem; color: #333; font-weight: bold;">卡槽位置:{{ item.n }}</span>
              <div class="bao-dianliang">{{ item.e * 10 }}%</div>
            </div>
            <div style="height: 0.35rem; line-height: 0.35rem; font-size: 0.28rem; color: #999; font-size: 0.3rem;">{{ item.sn }}</div>
          </div>
          <div class="bao-button" @click="tanchu.oneForce( item.n )">弹出设备</div>
        </div>
      </div>
    </div>
  </van-popup>  
</div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import axios from '@/utils/request';
declare const wx: any;

@Component
export default class QD_Shops extends Vue {

  list: any = []
  active: any = 1

  loading: boolean = false
  finished: boolean = false
  page: any = 1
  searchValue: any = ''
  
  getList() {
    let page = this.page, size = 10, userId = this.$store.state.userInfo.userId;
    let query: any = { page, size, userId, type: this.active };
    if(this.searchValue) query.shopName = this.searchValue;
    // query.shopName = '神木';
    axios.get('/api/ShopManageController/getShopManageList', query).then((res: any) => {
      let json = res || {};
      let list = json.list || [];
      this.page = page + 1;
      this.loading = false;

      let now = new Date().getTime();

      list.forEach((ele: any) => {
        let liushui: any =  [ ele.month3, ele.month2, ele.month1 ];
        // for (let key in ele.monthTotal) liushui.push({ month: key, value: ele.monthTotal[ key ] });
        // let i = 1;
        // liushui = liushui.sort((a: any, b: any) => {
        //   let atime = new Date( a.month ).getTime();
        //   let btime = new Date( b.month ).getTime();
        //   if (atime - btime > 0) {
        //     return i;
        //   } else {
        //     return i * -1;
        //   }
        // });
        // liushui = liushui.map((item: any) => item.value);
        // ele.level = this.getLevel(liushui);
        // ele.levelList = this.getLevalList(liushui);
        ele.liushui = liushui;
      });

      this.list.push( ...list );
      if(json.isLastPage) this.finished = true;

    }).catch((err: any) => {
      this.loading = false;
      this.finished = true;
    });
  }

  getLevel(liushui: any) {
    let day = new Date().getDate();
    let total = liushui[0] + liushui[1] + liushui[2];
    let average = 0;
    if ( total < 60 ) { return 0 }
    if ( day < 5 ) {
      average = Math.floor( (liushui[0] + liushui[1]) / 2 );
    } else {
      average = Math.floor( (liushui[0] + liushui[1] + ((liushui[2]/day) * 30)) / 3 );
    } 
    return this.levelNum(average);
  }

  getLevalList(liushui: any) {
    let list = liushui.slice(0);
    let level: any = [];  
    let day = new Date().getDate();
    list[2] = (list[2]/day) * 30;
    list.forEach((ele: any) =>  {
      level.push( this.levelNum(ele) );
    });
    return level;
  }
  levelNum(average: any) {
    if ( average < 60 ) return 0;
    else if ( average < 100 ) return 1;
    else if ( average < 200 ) return 2;
    else if ( average < 500 ) return 3;
    else if ( average < 1000 ) return 4;
    else return 5;
  }
  
  modify(shop: any) {
    this.$router.push({ name: 'AddMendian', query: { type: 'modify' }, params: shop });
  }
  goto(shop: any) {
    let config = this.$store.state.config;
    wx.config({ ...config, debug: false, jsApiList: [ 'scanQRCode', 'chooseImage', 'uploadImage', 'getLocation', 'openLocation' ] });
    wx.openLocation({
      latitude: shop.latitude, // 纬度，浮点数，范围为90 ~ -90
      longitude: shop.longitude, // 经度，浮点数，范围为180 ~ -180。
      name: shop.shopName, 
      address: shop.shopSite, // 地址详情说明
      scale: 23,
      infoUrl: ''
    });
  }

  changeType(type: any) {
    this.active = type + 1;
    this.onSearch();
  }
  onSearch() {
    this.page = 1;
    this.list = [];
    this.loading = true;
    this.finished = false;
    this.getList();
  }

  blank: any = {
    show: false,
    list: []
  }
  info: any = {}
  showBlank(item: any) {
    this.info = JSON.parse( JSON.stringify( item ) );
    this.blank.show = true;   
  }


  order: any = [ '租借中', '已归还', '已撤销', '超时' ]
  detail: any = {
    show: false,
    active: 0,

    shopId: '',

    equipList: [],

    page: 1,
    list: [],
    loading: false,
    finished: false,

    showBlank: (item: any) => {
      this.detail.shopId = item.shopId;
      this.detail.show = true;
      this.$nextTick(() => {
        if(this.$store.state.userInfo.userName == '13239294898') {
          this.detail.active = 1;
        } else {
          this.detail.active = 0;
        }
        this.detail.change();
      });
    },
    change: () => {
      if( this.detail.active == 1 ) {
        this.detail.list = [];
        this.detail.page = 1;
        this.detail.loading = true;
        this.detail.finished = false;
        this.detail.getList();
      } else {
        this.detail.getEquip();
      }
    },
    getEquip: () => {
      let query: any = { shopId: this.detail.shopId };
      axios.get('/api/ShopManageController/getEquipmentByShopId', query).then((res: any) => {
        this.detail.equipList = res || [];
      });      
    },
    getList: () => {
      let page = this.detail.page, size = 10, shopId = this.detail.shopId;
      let query: any = { page, size, shopId };
      this.detail.loading = true;
      axios.get('/api/orderFormController/manageOrderByShopId', query).then((res: any) => {
        if (this.detail.page != page) return ;
        let json = res || {};
        let list = json.list || [];
        this.detail.page = page + 1;
        this.detail.loading = false;
        this.detail.list.push( ...list );

        if(json.isLastPage) this.detail.finished = true;
        
      }).catch((err: any) => {
        this.detail.loading = false;
        this.detail.finished = true;
      });
    }
  }  

  
  deleteBind(v: any) {
    this.$dialog.confirm({
      message: `您确认要解绑 ${ v.equipmentNum } 吗？`
    }).then(() => {
      axios.post('/api/chargerPlaEquipmentController/unbindSnByshop', { query: { snList: v.equipmentNum, shopId: this.detail.shopId } }).then((res: any) => {
        this.$toast(`解绑成功！`);
        this.detail.getEquip();
      });
    })
  }  

  tanchu: any = {
    show: false,
    info: {},
    list: [],    
    showBlank: (item: any) => {
      this.tanchu.info = { equipmentNum: item.equipmentNum };
      axios.get('/api/chargerPlaController/getChargerInfo', { equipmentNum: item.equipmentNum }).then((res: any) => {
        let json = res || {};
        this.tanchu.list = json.list || [];
        this.tanchu.show = true;   
      }); 
    },
    allForce: () => {    
      this.$dialog.confirm({ message: `您确认要全部弹出充电宝吗？` }).then(() => {
        axios.get(`/api/chargerPlaController/force`, { equipmentNum: this.tanchu.info.equipmentNum, n: 0 }).then(() => this.$toast(`弹出成功！`));
      })
    },
    oneForce: (n: any) => {    
      this.$dialog.confirm({ message: `您确认要弹出卡槽位置 ${ n } 的充电宝吗？` }).then(() => {
        axios.get(`/api/chargerPlaController/force`, { equipmentNum: this.tanchu.info.equipmentNum, n }).then(() => this.$toast(`弹出成功！`));
      });
    }
  }

  changeStatus(item: any) {    
    this.$dialog.confirm({ message: `您确认要${ item.status ? '启用' : '停用' } ${ item.shopName } 吗？` }).then(() => {
      let shopManageIdList = item.shopId, status = item.status ? 0 : 1;
      axios.post('/api/ShopManageController/nableDisableeShopList', { query: { shopManageIdList, status } }).then((res: any) => {        
        this.$toast(`${ item.status ? '启用' : '停用' }成功！`);
        this.$router.go(0);
      });
    })
  }

  mounted() {
  }
  
};
</script>

<style lang="scss">
#QD_Shops {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .shop-box {
    width: 6.7rem;
    // height: 1.4rem;
    margin: 0.2rem auto;
    background: #fff;
    box-shadow: 1px 1px 2px 1px #dedede;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    border-radius: 0.04rem;
    padding: 0.1rem 0;
    .shop-img { 
      width: 0.8rem;
      height: 0.8rem;
    }
    .shop-right {
      width: 5.3rem;
      // height: 1.1rem;
      .shop-row {
        height: 0.54rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        font-size: 0.26rem;
        span {
          display: block;
          padding: 0.1rem; 
        }
      }
    }
  }
  #ShebeiList { 
    
    .bao-box {
      width: 6.9rem;
      height: 1.8rem;
      background: #FFFFFF;
      border-radius: 0.14rem;
      margin: 0.2rem auto;
      box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 );
      position: relative;
      .bao-icon {
        width: 0.9rem;
        height: 0.9rem;
        line-height: 0.9rem;
        text-align: center;
        border-radius: 50%;
        font-size: 0.4rem;
        color: #FFFFFF;
        background: #16B8BE;
        position: absolute;
        left: 0.23rem;
        top: 0.45rem;
      }
      .bao-content {
        position: absolute;
        top: 0.45rem;
        left: 1.4rem;
        .bao-title {
          height: 0.55rem;
          display: flex;
          flex-direction: row;
          align-items: center;
          .bao-dianliang {
            width: 0.88rem;
            height: 0.38rem;
            line-height: 0.38rem;
            border-radius: 0.16rem;
            text-align: center;
            background: rgba(46,208,138,0.1);
            font-size: 0.16rem;
            color: #2ED08A;
            margin-left: 0.4rem;
          }
        }
      }
      .bao-button {
        width: 1.67rem;
        height: 0.54rem;
        line-height: 0.54rem;
        border-radius: 0.27rem;
        text-align: center;
        font-size: 0.25rem;
        color: #FFFFFF;
        background: #16B8BE;
        box-shadow: 3px 3px 18px 3px rgba( 22, 184, 190, 0.32 );
        position: absolute; 
        top: 0.45rem;
        right: 0.32rem;
      }
    }
    .data-box {
      line-height: 26px;
      background: #fff;
      box-shadow: 1px 1px 2px 1px #dedede;
      border-radius: 3px;
      padding: 0 10px;
      font-size: 0.24rem;
      box-sizing: border-box;
      width: 6.7rem;
      margin: 0.1rem auto;
    }
    .data-box .data-title {
      line-height: 30px;
      border-bottom: 1px solid #dedede;
    }
    .data-box .data-title .right {
      float: right;
      color: #0086d1;
      cursor: pointer;
    }
    .data-box .data-main {
      padding: 5px 0;
    }
    .data-box .data-main .label {
      color: #0086d1;
    }
  }
  .data-title {
    line-height: 30px;
    border-bottom: 1px solid #dedede;
  }
  .data-title .right {
    float: right;
    color: #0086d1;
    cursor: pointer;
  }
  .ft-org {
    font-size: 0.16rem;
  }
}
</style>

